<template>
  <div class="max-w-lg">
    <!-- <div class=" bg-gray-500 w-full h-50"></div> -->
    <div
      class="
        max-w-xl
        mx-auto
        bg-white
        rounded-2xl
        shadow-2xl
        overflow-auto
        shadow-2xl
      "
    >
      <img
        class="h-48 w-full object-fill"
        src="../assets/svg.png"
        alt="Man looking at item at a store"
      />
      <div class="p-8">
        <div
          class="
            uppercase
            tracking-wide
            text-sm text-indigo-500
            font-semibold
            text-lg
          "
        >
          登陆
        </div>

        <div class="pt-5 pb-5 space-y-4">
          <el-input v-model="username" placeholder="请输入用户名"></el-input>
          <el-input
            v-model="password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </div>

        <div class="flex justify-between">
          <el-button @click="userLogin" type="primary">{{ message }}</el-button>
          <el-button @click="gotoRegister" type="warning">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { requests } from "../network/request";
// import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      message: "登陆",
      username: "",
      password: "",
    };
  },
  methods: {
    // btnLogin: function () {
    //   alert("Hello World!");
    // },
    // testaxios: function () {
    //   //提取全局的配置
    //   axios.defaults.baseURL = 'http://httpbin.org'
    //   axios.defaults.headers.get['content-type'] = 'application/x-www-form-urlencoded'
    //   axios({
    //     method: "get",
    //     url: "/get",
    //     withCredentials: true,
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },

    // test: function(){
    //   let res = this.$request("/dqtype/list","get");
    //   console.log(res);
    // }
    userLogin: function () {
      if (this.username == null || this.username == "") {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
        });
      } else if (this.password == null || this.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
      } else {
        requests({
          url: "/login",
          method: "post",
          data: {
            userName: this.username,
            passWord: this.password,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                message: "登陆成功！",
                type: "success",
              });
              //存储tokenValue
              localStorage.setItem('tokenValue',res.data.data.tokenValue)
              // setTimeout(()=>{alert("HelloWorld")},1*1000)延迟执行
              //延迟1秒跳转到首页
              setTimeout(() => {
                this.$router.push("/");
              });
            } else if (res.data.code == 403) {
              this.$message({
                message: "密码错误",
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    gotoRegister: function () {
      this.$router.push("/loginpage/register");
    },
  },
};
</script>
<style scoped>
</style>